<template>
  <div class="goods-list">
    <myheader titleName='商品列表'></myheader>
    <!-- infinite-scroll-immediate-check表示指令绑定到ul元素上时，不会立马执行loadMore方法 -->
    <ul v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <router-link class="goods-li" v-for='item in goodsList' :key='item.id' :to="`/goods_detail/${item.id}`" tag='li'>
        <div class="goods-container">
          <img :src="item.img_url" :alt="item.title">
          <h4>{{item.title}}</h4>
          <div class="goods-info">
            <div class="price-info"><span class="price-new">{{item.sell_price}}</span><span class="price-old">{{item.market_price}}</span></div>
            <div class="sell-info"><span class="sell-status">热卖中</span><span class="sell-leftcount">剩余{{item.stock_quantity}}件</span></div>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import myheader from '@/components/myheader'
import { getGoodsList } from '@/api'
export default {
  components: {
    myheader
  },
  data () {
    return {
      pageIndex: 1,
      goodsList: [],
      loading: false
    }
  },
  created () {
    this.initList()
  },
  methods: {
    initList () {
      getGoodsList(this.pageIndex).then(res => {
        // console.log(res)
        this.goodsList = this.goodsList.concat(res.message)
      })
    },
    // 加载更多处理函数
    loadMore () {
      // false表示触发无限滚动
      // this.loading = false
      this.pageIndex += 1
      this.initList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .goods-list {
    margin: 40px 0 0 0;
    background-color: #f4f4f4;
    ul {
      display: flex;
      flex-wrap: wrap;
      font-size: 10px;
    }
    h4 {
      font-size: 12px;
      font-weight: bold;
      height: 32px;
      // 多行文本超出省略号
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .goods-li {
      width: 50%;
      box-sizing: border-box;
      padding-top: 5px;
      display: flex;
      justify-content: column;
      .goods-container {
        width: 100%;
        background-color: #fff;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .price-info {
        display: flex;
        justify-content: space-between;
        .price-new {
          color: red;
        }
        .price-old {
          text-decoration: line-through;
        }
      }
      .sell-info {
        display: flex;
        justify-content: space-between;
      }
    }

    .goods-li:nth-child(2n + 1) {
      padding-right: 5px;
    }
    .goods-li:nth-child(2n) {
      padding-left: 5px;
    }
  }
</style>
